<template>
  <HeadContainer class="mine-legal-personal-data" :title="$t('title.personalInfo')" :back="back">
    <div class="d-flex justify-space-between align-center">
      <div>Transactions</div>
      <div>
        <v-switch inset hide-details="true" @click="toggleTransact"></v-switch>
      </div>
    </div>
    <div class="d-flex justify-space-between align-center">
      <div>Media</div>
      <div>
        <v-switch inset hide-details="true" @click="toggleMedia"></v-switch>
      </div>
    </div>
    <div class="d-flex justify-space-between align-center">
      <div>Messages</div>
      <div>
        <v-switch inset hide-details="true" @click="toggleMsg"></v-switch>
      </div>
    </div>
    <div class="d-flex justify-space-between align-center">
      <div>Activity log</div>
      <div>
        <v-switch inset hide-details="true" @click="toggleActive"></v-switch>
      </div>
    </div>
    <div class="d-flex justify-space-between align-center">
      <div>Wallets</div>
      <div>
        <v-switch inset hide-details="true" @click="toggleWallets"></v-switch>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { ref } from 'vue'
import { VSwitch } from 'vuetify/components'
import HeadContainer from '@/components/layout/HeadContainer.vue'

const switchTransact = ref(false)
const switchMedia = ref(false)
const switchMsg = ref(false)
const switchActive = ref(false)
const switchWallets = ref(false)

function toggleTransact() {
  switchTransact.value = !switchTransact.value
}
function toggleMedia() {
  switchMedia.value = !switchMedia.value
}
function toggleMsg() {
  switchMsg.value = !switchMsg.value
}
function toggleActive() {
  switchActive.value = !switchActive.value
}
function toggleWallets() {
  switchWallets.value = !switchWallets.value
}
</script>
